<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>相册详情 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            --secondary: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --text-light: #9ca3af;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 10px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary);
        }
        
        /* 相册头部 */
        .album-header {
            background-color: var(--bg-white);
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .album-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .album-meta {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .album-creator {
            display: flex;
            align-items: center;
            margin-right: 16px;
        }
        
        .creator-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 6px;
            object-fit: cover;
        }
        
        .album-date {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .album-description {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        .album-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .album-tag {
            padding: 4px 10px;
            background-color: var(--bg-light);
            border-radius: 16px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 照片预览区 */
        .photo-preview {
            width: 100%;
            background-color: #000;
            position: relative;
        }
        
        .preview-image {
            width: 100%;
            display: block;
        }
        
        .photo-count {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 12px;
        }
        
        .photo-navigation {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nav-btn-photo {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            color: white;
            backdrop-filter: blur(4px);
            transition: var(--transition);
        }
        
        .nav-btn-photo:hover {
            background-color: rgba(255,255,255,0.3);
        }
        
        /* 缩略图滚动区 */
        .thumbnails-container {
            background-color: var(--bg-white);
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .thumbnails-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 4px;
        }
        
        .thumbnails-scroll::-webkit-scrollbar {
            display: none;
        }
        
        .thumbnail-item {
            width: 70px;
            height: 70px;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
            border: 2px solid transparent;
            transition: var(--transition);
        }
        
        .thumbnail-item.active {
            border-color: var(--primary);
        }
        
        .thumbnail-item:hover {
            transform: scale(1.05);
        }
        
        .thumbnail-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 相册操作区 */
        .album-actions {
            background-color: var(--bg-white);
            padding: 12px 16px;
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid var(--border-light);
        }
        
        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.8rem;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .action-item i {
            font-size: 1.2rem;
            margin-bottom: 4px;
        }
        
        .action-item:hover {
            color: var(--primary);
        }
        
        .action-item.liked {
            color: var(--secondary);
        }
        
        /* 评论区 */
        .comments-section {
            background-color: var(--bg-white);
            margin-top: 10px;
            padding: 16px;
            border-radius: var(--radius);
            margin-bottom: 80px;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .comments-count {
            font-weight: 600;
        }
        
        .sort-comments {
            color: var(--primary);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
        }
        
        .sort-comments i {
            margin-left: 4px;
            font-size: 0.8rem;
        }
        
        /* 评论输入框 */
        .comment-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-input-group {
            flex: 1;
        }
        
        .comment-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-light);
            border-radius: 20px;
            font-size: 0.9rem;
            background-color: var(--bg-light);
            resize: none;
            height: 40px;
            transition: var(--transition);
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary-light);
            background-color: white;
        }
        
        .input-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px;
            gap: 10px;
        }
        
        .input-action-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.9rem;
            padding: 4px 8px;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .input-action-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary);
        }
        
        .submit-comment {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 评论列表 */
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        
        .comment-author {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--text-light);
        }
        
        .comment-text {
            background-color: var(--bg-light);
            padding: 10px 12px;
            border-radius: 12px;
            font-size: 0.9rem;
            margin-bottom: 6px;
            line-height: 1.4;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
            font-size: 0.85rem;
        }
        
        .comment-action {
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary);
            cursor: pointer;
        }
        
        .comment-action.liked {
            color: var(--secondary);
        }
        
        /* 回复列表 */
        .replies-list {
            margin-top: 12px;
            margin-left: 46px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-text {
            background-color: var(--bg-light);
            padding: 8px 10px;
            border-radius: 10px;
            font-size: 0.85rem;
            margin-bottom: 4px;
        }
        
        .reply-text .reply-to {
            color: var(--primary);
            font-weight: 500;
        }
        
        .reply-actions {
            display: flex;
            gap: 16px;
            font-size: 0.8rem;
        }
        
        /* 回复输入框 */
        .reply-input-container {
            margin-top: 8px;
            display: flex;
            gap: 8px;
        }
        
        .reply-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--border-light);
            border-radius: 16px;
            font-size: 0.85rem;
            background-color: var(--bg-light);
            resize: none;
            height: 36px;
        }
        
        .reply-input:focus {
            outline: none;
            border-color: var(--primary-light);
            background-color: white;
        }
        
        /* 底部操作栏 */
        .bottom-actions {
            position: fixed;
            bottom: 65px;
            left: 0;
            right: 0;
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-top: 1px solid var(--border-light);
            display: flex;
            gap: 10px;
            z-index: 999;
        }
        
        .bottom-action-btn {
            flex: 1;
            padding: 12px 0;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.95rem;
            border: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .btn-secondary {
            background-color: var(--bg-light);
            color: var(--text-primary);
        }
        
        .btn-secondary:hover {
            background-color: #e5e7eb;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 加载中状态 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            color: white;
        }
        
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">相册详情</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
    
    <!-- 相册头部信息 -->
    <div class="album-header">
        <h1 class="album-title">夏日海边旅行相册</h1>
        <div class="album-meta">
            <div class="album-creator">
                <img src="https://picsum.photos/id/64/100/100" alt="创作者" class="creator-avatar">
                <span>旅行爱好者</span>
            </div>
            <div class="album-date">
                <i class="far fa-calendar"></i>
                <span>2023-07-15 创建</span>
            </div>
        </div>
        <p class="album-description">
            这是今年夏天在青岛海边的旅行照片，记录了美好的海滩时光和日落美景。同行的朋友们都很开心，希望下次还能一起去旅行！
        </p>
        <div class="album-tags">
            <span class="album-tag">旅行</span>
            <span class="album-tag">海边</span>
            <span class="album-tag">夏天</span>
            <span class="album-tag">朋友</span>
        </div>
    </div>
    
    <!-- 照片预览区 -->
    <div class="photo-preview">
        <img src="https://picsum.photos/id/10/800/1200" alt="照片预览" class="preview-image" id="mainPhoto">
        <div class="photo-count">1/24</div>
        <div class="photo-navigation">
            <button class="nav-btn-photo" id="prevPhoto">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="nav-btn-photo" id="nextPhoto">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>
    
    <!-- 缩略图滚动区 -->
    <div class="thumbnails-container">
        <div class="thumbnails-scroll" id="thumbnailsContainer">
            <!-- 缩略图将通过JS动态生成 -->
        </div>
    </div>
    
    <!-- 相册操作区 -->
    <div class="album-actions">
        <div class="action-item" id="likeAction">
            <i class="far fa-heart"></i>
            <span>32 喜欢</span>
        </div>
        <div class="action-item">
            <i class="far fa-comment"></i>
            <span>8 评论</span>
        </div>
        <div class="action-item">
            <i class="far fa-share-square"></i>
            <span>分享</span>
        </div>
        <div class="action-item">
            <i class="far fa-bookmark"></i>
            <span>收藏</span>
        </div>
        <div class="action-item">
            <i class="far fa-user-plus"></i>
            <span>共享</span>
        </div>
    </div>
    
    <!-- 评论区 -->
    <div class="comments-section">
        <div class="comments-header">
            <div class="comments-count">评论 (8)</div>
            <div class="sort-comments">
                最新 <i class="fas fa-chevron-down"></i>
            </div>
        </div>
        
        <!-- 评论输入框 -->
        <div class="comment-input-container">
            <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="user-avatar">
            <div class="comment-input-group">
                <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                <div class="input-actions">
                    <button class="input-action-btn">
                        <i class="far fa-image"></i>
                    </button>
                    <button class="input-action-btn">
                        <i class="far fa-smile"></i>
                    </button>
                    <button class="input-action-btn submit-comment" id="submitComment">发布</button>
                </div>
            </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list" id="commentsList">
            <!-- 评论1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/237/100/100" alt="用户头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">大自然爱好者</div>
                        <div class="comment-time">3天前</div>
                    </div>
                    <div class="comment-text">
                        这组照片拍得太棒了！特别是日落那张，色调真的很美，请问用什么相机拍的？
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i>
                            <span>5</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-header">
                                    <div class="comment-author">旅行爱好者</div>
                                    <div class="comment-time">2天前</div>
                                </div>
                                <div class="reply-text">
                                    <span class="reply-to">@大自然爱好者</span> 谢谢喜欢！用的是索尼A7M4，搭配24-70mm镜头拍的
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action like-comment">
                                        <i class="far fa-heart"></i>
                                        <span>2</span>
                                    </div>
                                    <div class="comment-action reply-btn">
                                        <i class="far fa-comment"></i>
                                        <span>回复</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 回复输入框 (默认隐藏) -->
                    <div class="reply-input-container" style="display: none;">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                        <textarea class="reply-input" placeholder="回复 @大自然爱好者..."></textarea>
                        <button class="input-action-btn submit-comment submit-reply">发送</button>
                    </div>
                </div>
            </div>
            
            <!-- 评论2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/177/100/100" alt="用户头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">海风拂面</div>
                        <div class="comment-time">1周前</div>
                    </div>
                    <div class="comment-text">
                        这是在青岛哪个海滩拍的呀？看起来好熟悉，我上周也去了青岛！
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i>
                            <span>3</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复输入框 (默认隐藏) -->
                    <div class="reply-input-container" style="display: none;">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                        <textarea class="reply-input" placeholder="回复 @海风拂面..."></textarea>
                        <button class="input-action-btn submit-comment submit-reply">发送</button>
                    </div>
                </div>
            </div>
            
            <!-- 评论3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/342/100/100" alt="用户头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">摄影发烧友</div>
                        <div class="comment-time">2周前</div>
                    </div>
                    <div class="comment-text">
                        构图很专业，光影处理得也很好，学习了！
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i>
                            <span>8</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复输入框 (默认隐藏) -->
                    <div class="reply-input-container" style="display: none;">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                        <textarea class="reply-input" placeholder="回复 @摄影发烧友..."></textarea>
                        <button class="input-action-btn submit-comment submit-reply">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="bottom-actions">
        <button class="bottom-action-btn btn-secondary">
            <i class="far fa-image"></i> 下载照片
        </button>
        <button class="bottom-action-btn btn-primary">
            <i class="fas fa-plus"></i> 添加到我的相册
        </button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-images"></i>
            <span>相册</span>
        </a>
        <a href="#" class="nav-item">
            <i class="far fa-comment"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="far fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 加载中覆盖层 (默认隐藏) -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="spinner"></div>
        <div>加载中...</div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 相册照片数据
        const albumPhotos = [
            { id: 1, url: "https://picsum.photos/id/10/800/1200", caption: "海边日落" },
            { id: 2, url: "https://picsum.photos/id/11/800/1200", caption: "沙滩漫步" },
            { id: 3, url: "https://picsum.photos/id/12/800/1200", caption: "海浪" },
            { id: 4, url: "https://picsum.photos/id/13/800/1200", caption: "渔船" },
            { id: 5, url: "https://picsum.photos/id/14/800/1200", caption: "海岸线" },
            { id: 6, url: "https://picsum.photos/id/15/800/1200", caption: "沙滩城堡" },
            { id: 7, url: "https://picsum.photos/id/16/800/1200", caption: "海上日出" },
            { id: 8, url: "https://picsum.photos/id/17/800/1200", caption: "朋友合影" }
            // 更多照片可以继续添加
        ];
        
        // 当前照片索引
        let currentPhotoIndex = 0;
        
        // DOM元素
        const mainPhoto = document.getElementById("mainPhoto");
        const thumbnailsContainer = document.getElementById("thumbnailsContainer");
        const photoCount = document.querySelector(".photo-count");
        const prevPhotoBtn = document.getElementById("prevPhoto");
        const nextPhotoBtn = document.getElementById("nextPhoto");
        const likeAction = document.getElementById("likeAction");
        const backBtn = document.getElementById("backBtn");
        const moreBtn = document.getElementById("moreBtn");
        const submitCommentBtn = document.getElementById("submitComment");
        const replyBtns = document.querySelectorAll(".reply-btn");
        const submitReplyBtns = document.querySelectorAll(".submit-reply");
        const likeCommentBtns = document.querySelectorAll(".like-comment");
        const loadingOverlay = document.getElementById("loadingOverlay");
        
        // 初始化
        function init() {
            renderThumbnails();
            setupEventListeners();
        }
        
        // 渲染缩略图
        function renderThumbnails() {
            albumPhotos.forEach((photo, index) => {
                const thumbnail = document.createElement("div");
                thumbnail.className = `thumbnail-item ${index === currentPhotoIndex ? "active" : ""}`;
                thumbnail.innerHTML = `<img src="${photo.url}" alt="缩略图 ${index + 1}">`;
                thumbnail.addEventListener("click", () => {
                    showLoading();
                    // 模拟加载延迟
                    setTimeout(() => {
                        currentPhotoIndex = index;
                        updateMainPhoto();
                        updateThumbnails();
                        hideLoading();
                    }, 300);
                });
                thumbnailsContainer.appendChild(thumbnail);
            });
        }
        
        // 更新主照片
        function updateMainPhoto() {
            mainPhoto.src = albumPhotos[currentPhotoIndex].url;
            photoCount.textContent = `${currentPhotoIndex + 1}/${albumPhotos.length}`;
        }
        
        // 更新缩略图状态
        function updateThumbnails() {
            const thumbnails = document.querySelectorAll(".thumbnail-item");
            thumbnails.forEach((thumbnail, index) => {
                if (index === currentPhotoIndex) {
                    thumbnail.classList.add("active");
                    // 滚动到当前缩略图
                    thumbnail.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
                } else {
                    thumbnail.classList.remove("active");
                }
            });
        }
        
        // 上一张照片
        function prevPhoto() {
            if (currentPhotoIndex > 0) {
                showLoading();
                setTimeout(() => {
                    currentPhotoIndex--;
                    updateMainPhoto();
                    updateThumbnails();
                    hideLoading();
                }, 300);
            }
        }
        
        // 下一张照片
        function nextPhoto() {
            if (currentPhotoIndex < albumPhotos.length - 1) {
                showLoading();
                setTimeout(() => {
                    currentPhotoIndex++;
                    updateMainPhoto();
                    updateThumbnails();
                    hideLoading();
                }, 300);
            }
        }
        
        // 点赞功能
        function toggleLike() {
            const icon = likeAction.querySelector("i");
            const text = likeAction.querySelector("span");
            let count = parseInt(text.textContent);
            
            if (icon.classList.contains("far")) {
                icon.classList.remove("far");
                icon.classList.add("fas");
                likeAction.classList.add("liked");
                text.textContent = `${count + 1} 喜欢`;
            } else {
                icon.classList.remove("fas");
                icon.classList.add("far");
                likeAction.classList.remove("liked");
                text.textContent = `${count - 1} 喜欢`;
            }
        }
        
        // 显示回复输入框
        function toggleReplyInput(replyBtn) {
            const commentItem = replyBtn.closest(".comment-content");
            const replyInputContainer = commentItem.querySelector(".reply-input-container");
            
            // 隐藏其他所有回复框
            document.querySelectorAll(".reply-input-container").forEach(container => {
                if (container !== replyInputContainer) {
                    container.style.display = "none";
                }
            });
            
            // 切换当前回复框显示状态
            replyInputContainer.style.display = replyInputContainer.style.display === "none" ? "flex" : "none";
            
            // 如果显示，则聚焦输入框
            if (replyInputContainer.style.display === "flex") {
                replyInputContainer.querySelector(".reply-input").focus();
            }
        }
        
        // 提交评论
        function submitComment() {
            const input = document.querySelector(".comment-input");
            const commentText = input.value.trim();
            
            if (commentText) {
                // 创建新评论元素
                const newComment = document.createElement("div");
                newComment.className = "comment-item";
                newComment.innerHTML = `
                    <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <div class="comment-author">我</div>
                            <div class="comment-time">刚刚</div>
                        </div>
                        <div class="comment-text">
                            ${commentText}
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-comment">
                                <i class="far fa-heart"></i>
                                <span>0</span>
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-comment"></i>
                                <span>回复</span>
                            </div>
                        </div>
                        
                        <!-- 回复输入框 (默认隐藏) -->
                        <div class="reply-input-container" style="display: none;">
                            <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                            <textarea class="reply-input" placeholder="回复..."></textarea>
                            <button class="input-action-btn submit-comment submit-reply">发送</button>
                        </div>
                    </div>
                `;
                
                // 添加到评论列表顶部
                const commentsList = document.getElementById("commentsList");
                commentsList.insertBefore(newComment, commentsList.firstChild);
                
                // 清空输入框
                input.value = "";
                
                // 更新评论计数
                const commentsCount = document.querySelector(".comments-count");
                const count = parseInt(commentsCount.textContent.match(/\d+/)[0]) + 1;
                commentsCount.textContent = `评论 (${count})`;
                
                // 为新评论绑定事件
                bindCommentEvents(newComment);
            }
        }
        
        // 提交回复
        function submitReply(submitBtn) {
            const replyInputContainer = submitBtn.closest(".reply-input-container");
            const input = replyInputContainer.querySelector(".reply-input");
            const replyText = input.value.trim();
            
            if (replyText) {
                const commentContent = replyInputContainer.closest(".comment-content");
                const commentAuthor = commentContent.querySelector(".comment-author").textContent;
                
                // 检查是否有回复列表，没有则创建
                let repliesList = commentContent.querySelector(".replies-list");
                if (!repliesList) {
                    repliesList = document.createElement("div");
                    repliesList.className = "replies-list";
                    commentContent.insertBefore(repliesList, replyInputContainer);
                }
                
                // 创建新回复元素
                const newReply = document.createElement("div");
                newReply.className = "reply-item";
                newReply.innerHTML = `
                    <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <div class="comment-author">我</div>
                            <div class="comment-time">刚刚</div>
                        </div>
                        <div class="reply-text">
                            <span class="reply-to">@${commentAuthor}</span> ${replyText}
                        </div>
                        <div class="comment-actions">
                            <div class="comment-action like-comment">
                                <i class="far fa-heart"></i>
                                <span>0</span>
                            </div>
                            <div class="comment-action reply-btn">
                                <i class="far fa-comment"></i>
                                <span>回复</span>
                            </div>
                        </div>
                    </div>
                `;
                
                // 添加到回复列表顶部
                repliesList.insertBefore(newReply, repliesList.firstChild);
                
                // 清空输入框并隐藏
                input.value = "";
                replyInputContainer.style.display = "none";
                
                // 为新回复绑定事件
                bindCommentEvents(newReply);
            }
        }
        
        // 评论点赞
        function toggleCommentLike(likeBtn) {
            const icon = likeBtn.querySelector("i");
            const countEl = likeBtn.querySelector("span");
            let count = parseInt(countEl.textContent);
            
            if (icon.classList.contains("far")) {
                icon.classList.remove("far");
                icon.classList.add("fas");
                likeBtn.classList.add("liked");
                countEl.textContent = count + 1;
            } else {
                icon.classList.remove("fas");
                icon.classList.add("far");
                likeBtn.classList.remove("liked");
                countEl.textContent = count - 1;
            }
        }
        
        // 绑定评论相关事件
        function bindCommentEvents(element) {
            // 回复按钮事件
            const replyBtn = element.querySelector(".reply-btn");
            if (replyBtn) {
                replyBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    toggleReplyInput(replyBtn);
                });
            }
            
            // 回复提交事件
            const submitReplyBtn = element.querySelector(".submit-reply");
            if (submitReplyBtn) {
                submitReplyBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    submitReply(submitReplyBtn);
                });
            }
            
            // 评论点赞事件
            const likeBtn = element.querySelector(".like-comment");
            if (likeBtn) {
                likeBtn.addEventListener("click", (e) => {
                    e.stopPropagation();
                    toggleCommentLike(likeBtn);
                });
            }
        }
        
        // 显示加载状态
        function showLoading() {
            loadingOverlay.style.display = "flex";
        }
        
        // 隐藏加载状态
        function hideLoading() {
            loadingOverlay.style.display = "none";
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 照片导航
            prevPhotoBtn.addEventListener("click", prevPhoto);
            nextPhotoBtn.addEventListener("click", nextPhoto);
            
            // 点赞功能
            likeAction.addEventListener("click", toggleLike);
            
            // 返回按钮
            backBtn.addEventListener("click", () => {
                history.back();
                // 实际应用中可以使用：window.location.href = "albums.html";
            });
            
            // 更多选项按钮
            moreBtn.addEventListener("click", () => {
                alert("更多相册操作选项");
            });
            
            // 提交评论
            submitCommentBtn.addEventListener("click", submitComment);
            
            // 为已有评论绑定事件
            document.querySelectorAll(".comment-item, .reply-item").forEach(item => {
                bindCommentEvents(item);
            });
            
            // 底部操作按钮
            document.querySelector(".bottom-action-btn.btn-secondary").addEventListener("click", () => {
                showLoading();
                setTimeout(() => {
                    alert(`照片已下载: ${albumPhotos[currentPhotoIndex].caption}`);
                    hideLoading();
                }, 800);
            });
            
            document.querySelector(".bottom-action-btn.btn-primary").addEventListener("click", () => {
                alert("已添加到我的相册");
            });
            
            // 支持键盘左右箭头导航照片
            document.addEventListener("keydown", (e) => {
                if (e.key === "ArrowLeft") {
                    prevPhoto();
                } else if (e.key === "ArrowRight") {
                    nextPhoto();
                }
            });
        }
        
        // 初始化页面
        document.addEventListener("DOMContentLoaded", init);
    </script>
</body>
</html>
